<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
  <title>采购</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  	<script src="res/js/jquery-2.1.4.min.js" type="text/javascript" ></script>
	<link rel="stylesheet" href="res/layui/css/layui.css">
	<script src="res/layui/layui.js"></script>
</head>
<body>
<div style="padding-top: 10px;margin-bottom: -10px;">
		采购人：
		<div class="layui-inline" style="width: 140px;">
			<input class="layui-input" name="staffName" id="staffName" autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload" onclick="reloadData()">搜索</button>
		<button data-type="auto" class="layui-btn layui-btn-normal" onclick="add_article_sort()">新增采购单</button>
	</div>
	<table class="layui-table" id="fdAnnex" lay-filter="demo"></table> 
	
	
<script type="text/html" id="demo">
  <a class="layui-btn layui-btn-xs"  lay-event="detail">详情</a>
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">审核进度</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/javascript">
		var table;
		var loadIndex;
		var openIndex;

		function showList(fdproId) {
			url = "fdprofrom/showFdcgmx.action?fdproId="+fdproId;
			openIndex = layer.open({
				type : 2//样式
				,
				area : [ '720px', '500px' ],
				title : "采购订单详情"//标题
				,
				id : 'mesFrom' //防止重复弹出
				,
				content : url,
				shade : [ 0.8, '#393D49' ] //显示遮罩
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
		}

		function deleteRec(fdproId, i) {
			var url = "fdprofrom/deletefdpro.action";
			$.post(url, {
				"fdproId" : fdproId
			}, function(info) {
				layer.msg(info.mes);
				layer.close(i);
			});
		}

		layui.use([ 'table' ], function() {
			table = layui.table;
			loadIndex = layer.load();
			//方法级渲染
			table.render({
				loading : true,
				id : 'fdproId',
				page : true,
				height : 400,
				size : "sm",
				elem : '#fdAnnex',
				url : 'fdprofrom/allfdProfrom.action',
				method : 'post',
				where : {

				},
				cols : [ [ {
					field : 'taName',
					title : '采购人',
					width : 70,
					align : 'center'
				},{
					field : 'annexName',
					title : '分店',
					width : 100,
					align : 'center'
				}, {
					field : 'fdproWarecount',
					title : '总数量',
					width : 70,
					align : 'center'
				}, {
					field : 'fdproSumprice',
					title : '总价',
					width : 60,
					align : 'center'
				},{
					field : 'fdproIvso',
					title : '审核状态',
					width : 120,
					align : 'center',
					templet:"#titleTpl"
				},{
					field : 'timetsr',
					title : '采购时间',
					width : 150,
					align : 'center'
				}, {
					fixed : 'right',
					width : 200,
					align : 'center',
					toolbar : '#demo'
				} ] ]

				,
				done : function(res, curr, count) {
					layer.close(loadIndex);//加载层关闭  
				}
			});

			/**
			查看审核情况
		*/
		function information(entryId){
			openIndex = layer.open({
				type : 2//样式
				,
				skin : 'layui-layer-molv'//样式
				,
				area : [ '50%', '70%' ],
				title : "审核记录"//标题 
				,
				id : 'queryExam' //防止重复弹出
				,
				content : 'pages/SH/queryExam.jsp?entryId='+entryId+'&type=1',
				shade : [ 0.8, '#393D49' ] //显示遮罩 
				,
				shadeClose : true//点击也能遮罩层关闭
				,
				anim : 2
			//弹出动画 
			});
		}

			
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						if(data.fdproIvso!=0){
							layer.msg('不能操作该数据！',{icon: 5,anim: 6});
						}else{
							var i = layer.load();
							deleteRec(data.fdproId, i);
							obj.del();
						}
						
						layer.close(index);
					});
					
					
				}else if(obj.event === 'edit'){
					if(data.fdproIvso!=0){
						information(data.fdproId);//查询审核情况的方法
					}else{
						layer.msg('等待审核',{icon: 5,anim: 6});
					}
				} else if(obj.event === 'detail'){
					showList(data.fdproId);
				}
			});
			
			
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		
		function reloadData(){
			table.reload('fdproId', {
				where : {
					'fdproTime' : $("#test1").val(),
					'staffName' : $("#staffName").val()
				}
			});
		}
		
	</script>

<!--添加图层-->
	<div id="addsort_style" style="display: none">
		<div class="add_content">
		<div  style="margin: 10px;" class="layui-form">
				<div class="layui-inline">
      				<label class="layui-form-label">商品:</label>
					<div class="layui-input-inline">
						<select id="boards" style="width: 100px; height: 40px;" lay-verify="required" lay-search="">
								<option value="">请选择商品</option>
						</select>
					</div>
				</div>
					&nbsp;&nbsp;&nbsp;
					数量:
					<input type="text" style="width: 100px; height: 37px;" id="wareCount" name="wareCount">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<button class="layui-btn layui-btn-normal" id="addcure" name="">增加</button>
					
				</div>
			<div style="margin: 10px; width: 700px;">
				<form action="" method="post"  id="fdcureAdd">
					<!--消息汇总-->
					<table class="layui-table"
						id="curedan" style="margin-buttom: 9px;">
						<tr >
							<th width="230">经办人</th>
							<th width="230">采购总量</th>
							<th width="230">采购总价</th>
						</tr>
						<tr >
							<!-- 订单表的id -->
							<th width="60" style="background: #f3f3f3;">${staff.staffName}</th>
							<th width="60" style="background: #f3f3f3;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="text" id="sumNum" name="fdproWarecount"  style="width: 60px; border-style: none; background: #f3f3f3;" readonly></th>
							<th width="100" style="background: #f3f3f3;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="text"  id="sumMoney" name="fdproSumprice" style="width: 60px; border-style: none; background: #f3f3f3;" readonly>元
							</th>
					</table>
					<!--明细表-->
					<table class="layui-table"
						id="cureTab" style="margin-top: 15px;">
						<tr class="text-c">
								<th width="150">商品生产厂家</th>
								<th width="100">商品名称</th>
								<th width="60">商品单价/元</th>
								<th width="60">商品数量</th>
								<th width="60">商品总价/元</th>
								<th width="40">操作</th>
						</tr>
						<!-- 循环取出明细订单 -->
						<input type="hidden" name="">
					</table>
				</form>
			</div>
		</div>
	</div>    
<script>
/**添加**/
function add_article_sort(index) {
	layer.open({
		type : 1,
		title : '添加采购单',
		maxmin : true,
		shadeClose : false, //点击遮罩关闭层
		area : [ '720px', '500px' ],
		content : $('#addsort_style'),
		btn : [ '提交', '取消' ],
		yes : function(index, layero) {
			//获取明细table中的数据
			var str = ""; //需要封装的字符串
			var rows = $("#cureTab tr").length - 1;//表格的总行数
			//表格中所有的值.每个单元格用~隔开,每行使用_隔开.
			for (i = 0; i < rows; i++) {
				$("#cureTab tr:gt(0):eq(" + i + ") td").each(function() {
					str += $(this).text() + "~";
				});
				str += "_";
			}
			var url = "fdprofrom/addfdProfrom.action?tabstr="+str;
			var data = $("#fdcureAdd").serialize();
			$.post(url, data,function(mes) {
				parent.layer.msg(mes.mes);
				layer.close(index);
				location.reload();//重新加载页面
				$("#sumMoney").val("");
				$("#sumNum").val("");
			},"json");

		}
	})
}

$(function() {
	//同步
	$.ajaxSetup({
		async : false
	});
	
	//绑定增加按钮
	$("#addcure").click(function() {
		//获取明细table中的数据
		var str = ""; //需要封装的字符串
		var wName = document.getElementsByName("waName");
		for (i = 0; i < wName.length; i++) {
			str+= wName[i].innerHTML;
		}
		//商品名称
		var wareId = $("#boards").val();
		//商品数量
		var wareCount = $("#wareCount").val();
		
		if(wareId == null || wareId =="" || wareCount==null || wareCount==""){
			layer.alert("请输入需要增加的商品或填写数量",{
	              title: '提示框',				
				icon:2,		
			});
			
		}else{
		//表格的总行数
		var rows = $("#cureTab tr").length;
		//查询药品名称地址
		var url = "fdprofrom/selectMes.action?wareId="+wareId;
			$.post(url,null,function(re) {
				//商品价格
				var wareMoney = re.wareMoney;
				//计量单位
				var measure = re.measure;
				//id
				var wid = re.wareId;
				//药品名称
				var wareName=re.wareName;
				
				//商品总价
				var wareSum = wareCount* wareMoney;
				
				//商品条形码
				var wareFactory=re.wareFactory;
				//叠加同种商品的数量和金额,如果在明细表中可以找到用户刚刚选择增加的商品，那么不重新增加一行，而是叠加到一行中
				if (str.indexOf(wareName) > -1) {
					//叠加数量，wcount
					var counts = parseInt($("#"+wid+ "_count").html());
					//金额
					var summoneys = parseInt($("#"+ wid+ "_sum").html());
					//得到叠加的数量和金额
					var onecount = counts+ parseInt(wareCount);
					
					var onemoney = summoneys+ parseInt(wareSum);
					//赋值
					$("#"+ wid +"_count").html(onecount+ "/"+ measure);
					
					$("#"+ wid +"_sum").html(onemoney);
				} else {
					//增加一行
					var newRow = "<tr class='text-c'><td style='display:none'>"+wid+"</td><td>"+ wareFactory+ "</td><td name='waName'>"+ wareName+ "</td><td>"+ wareMoney+ "</td><td name='wcount' id='"+wid+"_count'>"+ wareCount+ "/"+ measure+ "</td><td name='wsum'id='"+wid+"_sum'>"+ wareSum+ "</td><td class='delete_css' onclick='del(this);'><i class='layui-icon'>&#xe640;</i></td></tr>";
					$("#cureTab tr:last").after(newRow);
					}
				});
			
				//清空头部两个文本框
				$("#wareCount").val("");
				getNumber();
		}
	});
});

//加载商品下拉框
function getBoards(){
	$.ajax({
		url : 'ware/showAll.action?page=1&limit=999',
		type : 'POST',
		success : function(data) {
			var boards = eval(data.data);
			$(boards).each(
					function(index) {
						var board = boards[index];
						var optionStr= "<option value='"+board.wareId+"'>"+board.wareName+"</option>";
						$("#boards").append(optionStr);
						form.render(); 
					});
		},
		error : function(data) {
			alert('查找板块报错');
		}
	});
}

layui.use('form', function () {
    form = layui.form;
    getBoards();
});
//增加表单删除一行
function del(obj) {
	var tr = obj.parentNode;
	var row = tr.rowIndex;
	$("#cureTab tr:eq(" + row + ")").remove();
	getNumber();
}

//取数据加到另一个表
function getNumber() {
	var count = document.getElementsByName("wcount");//数量
	var summoney = document.getElementsByName("wsum");//总价
	var num = 0;
	for (i = 0; i < count.length; i++) {
		//强转为数字
		num += parseInt(count[i].innerHTML);
	}
	var money = 0;
	for (j = 0; j < summoney.length; j++) {
		//强转为数字
		money += parseInt(summoney[j].innerHTML);
	}
	$("#sumMoney").val(money);
	$("#sumNum").val(num);
}

layui.use('laydate', function(){
	  var laydate = layui.laydate;
	  //常规用法
	  laydate.render({
	    elem: '#test1'
	  });
	  
	 
	});
</script>
                  
</body>

<script type="text/html" id="titleTpl">
  {{#  if(d.fdproIvso == 0){ }}
   		<span class="layui-badge layui-bg-gray">未审核</span>
  {{#  } else if(d.fdproIvso == 1){ }}
  	  	<span class="layui-badge layui-bg-orange">等待总经理审核</span>
  {{#  } else if(d.fdproIvso == 2){ }}
		<span class="layui-badge layui-bg-blue">通过审核</span>
   {{#  } else if(d.fdproIvso == 3){ }}
		<span class="layui-badge">打回</span>
  {{#  } }}
</script>
</html>
